<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <div id="app">
        <h2 v-if="order === 0">站在前排的 v-if</h2>
        <h2 v-else-if="order === 1">不上不下 v-else-if</h2>
        <h2 v-else> 负责垫后 v-else</h2>
        <button @click="toggleTitle">切换标题</button>
        
    </div> -->


    <div id="app">
        <h2 v-show="order === 0">v-show,visible = true</h2>
        <h2 v-show="!visible">v-show,visible = false</h2>
        <h2 v-if="visible">v-if,visible = true</h2>
        <h2 v-else>v-if,visible = false</h2>
        <!-- <button @click="toggleTitle">切换标题</button> -->
        
    </div>
    <script language="javaScript" src="../JS文件/vue.js"></script>
    <script type="text/javaScript">
      let vm = new Vue({
        
        el:'#app',
        data(){
            return {
                visible:false
            }
        }

    //     methods:{
    //         toggleTitle(){
    //             this.order=++this.order%3
    //             console.log('order的值:',this.order)
    //         }
    //     }


        
        })
    </script>
</body>
</html>